<template>
	<el-container>
		<img class="imgbg" src="../assets/imgs/login_bg05.jpg" alt="">
		<div class="signinpanel">
			<el-row :gutter="20">
				<el-col :span="12" class="col-left">
					<div>
						<img src="../assets/logo1.png" alt="" style="width: 200px; height: 64px; margin-left: -26px" />
						<h4 class="no-margins">欢迎使用 微简 后台管理系统</h4>
						<ul>
							<li><i class="el-icon-help"></i>敏捷咨询</li>
							<li><i class="el-icon-help"></i>项目需求</li>
							<li><i class="el-icon-help"></i>前端优化</li>
							<li><i class="el-icon-help"></i>项目外包</li>
							<li><i class="el-icon-help"></i>定制开发</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="12">
					<form id="signupForm" autocomplete="off" novalidate="novalidate">
						<h4 class="no-margins">登录：</h4>
						<div class="row">
							<input type="text" ref="LoginName" name="username" class="uname" placeholder="用户名"
								value="admin" v-model="LoginName" />
						</div>
						<div class="row">
							<input type="password" name="password" class="pword" ref="PasswordSalt" placeholder="密码"
								value="admin123" v-model="PasswordSalt" />
						</div>
						<div class="row">
							<div class="col">
								<input type="text" name="validateCode" ref="CheckCode" class="code" placeholder="验证码"
									maxlength="5" v-model="CheckCode" />
							</div>
							<div class="col">
								<a @click="clk()" title="点击更换验证码">
									<img :src="codeImgUrl" class="imgcode" width="85%" />
								</a>
							</div>
						</div>
						<el-row>
							<el-checkbox v-model="checked" style="color:#fff" id="rememberme" name="rememberme">记住我
							</el-checkbox>
						</el-row>
						<el-row class="btn">
							<el-button type="primary" @click="login" size="medium">登录</el-button>
						</el-row>
					</form>
				</el-col>
			</el-row>
			<el-row>
				<div class="signup-footer">
					<div class="pull-left">
						Copyright © 2018-2021 vjong.com All Rights Reserved. <br />
					</div>
				</div>
			</el-row>
		</div>

	</el-container>
</template>
<script>
	import {
		get,
		post
	} from "../../common/apiconfig"
	export default {
		data() {
			return {
				codeImgUrl: "",
				LoginName: localStorage.getItem("LoginName"),
				PasswordSalt: "",
				CheckCode: "",
				checked: false
			};
		},
		mounted: function() {
			this.updCodeImgUrl();
		},
		methods: {
			clk() {
				this.updCodeImgUrl();
			},
			login() {
				if (this.LoginName === '') {
					this.$refs.LoginName.focus();
					return false
				}
				if (this.PasswordSalt === '') {
					this.$refs.PasswordSalt.focus();
					return false
				}
				if (this.CheckCode === '') {
					this.$refs.CheckCode.focus();
					return false
				}
				let that = this;
				post(
					"/Login", {
						LoginName: this.LoginName,
						PasswordSalt: this.PasswordSalt,
						CheckCode: this.CheckCode
					}
				).then((d) => {
					if (d.code == "001") {
						localStorage.setItem("token", d.data.Token);
						localStorage.setItem("userLoginData", JSON.stringify(d.data));
						localStorage.setItem("LoginName", this.LoginName)
						get(
							"/GetDictionary"
						).then((data) => {
							if (data.code == "001") {
								localStorage.setItem("dictionariesData", JSON.stringify(data.data.items));
								this.$router.push('/home');
							} else {
								that.$message.error(data.msg);
							}
						});
					} else {
						that.$message.error(d.msg);
					}
				});
			},
			updCodeImgUrl() {
				get('/RefrashCheckImage').then((d) => {
					this.codeImgUrl = d.data.image;
				});
			},
		},
	};
</script>
<style>
	html {
		height: 100%;
	}

	.imgbg {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.col-left {
		min-height: 300px;
		display: flex;
		align-items: center;
	}

	.col-left ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		color: #fff;
	}

	ul li i {
		margin-right: 5px;
	}

	.signinpanel {
		width: 750px;
		margin: 10% auto 0;
		color: #fff;
	}

	.no-margins {
		font-size: 16px;
	}

	.signinpanel .logopanel {
		float: none;
		width: auto;
		padding: 0;
		background: 0;
	}

	.signinpanel .signin-info ul {
		list-style: none;
		padding: 0;
		margin: 20px 0;
	}

	.signinpanel .form-control {
		display: block;
		margin-top: 15px;
	}

	.signinpanel .uname {
		background: #fff url(../assets/imgs/user.png) no-repeat 95% center;
		color: #333;
	}

	.signinpanel .pword {
		background: #fff url(../assets/imgs/locked.png) no-repeat 95% center;
		color: #333;
	}

	.signinpanel .code {
		background: #fff no-repeat 95% center;
		color: #333;
		margin: 0 0 15px 0;
	}

	.signinpanel .btn {
		margin-top: 15px;
	}

	.signinpanel form {
		background: rgba(255, 255, 255, 0.2);
		border: 1px solid rgba(255, 255, 255, 0.3);
		-moz-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
		-webkit-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
		box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		padding: 30px;
	}

	.signup-footer {
		border-top: solid 1px #fff;
		margin: 20px 0;
		padding-top: 15px
	}

	.no-margins {
		color: #fff;
	}

	.pull-left {
		color: #fff;
	}

	@media screen and (max-width: 768px) {

		.signinpanel,
		.signuppanel {
			margin: 0 auto;
			width: 380px !important;
			padding: 20px;
		}

		.signinpanel form {
			margin-top: 20px;
		}

		.signup-footer,
		.signuppanel .form-control {
			margin-bottom: 10px;
		}

		.signup-footer .pull-left,
		.signup-footer .pull-right {
			float: none !important;
			text-align: center;
		}

		.signinpanel .signin-info ul {
			display: none;
		}
	}

	@media screen and (max-width: 320px) {

		.signinpanel,
		.signuppanel {
			margin: 0 20px;
			width: auto;
		}
	}

	.checkbox-custom {
		position: relative;
		padding: 0 15px 0 25px;
		margin-bottom: 7px;
		display: inline-block;
		color: #fff;
	}

	.checkbox-custom input[type="checkbox"] {
		opacity: 0;
		position: absolute;
		cursor: pointer;
		z-index: 2;
		margin: -6px 0 0 0;
		top: 50%;
		left: 3px;
	}

	.checkbox-custom label:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -9px;
		width: 18px;
		height: 17px;
		display: inline-block;
		border-radius: 2px;
		background: #fff;
	}

	.checkbox-custom input[type="checkbox"]:checked+label:after {
		position: absolute;
		display: inline-block;
		font-family: "Glyphicons Halflings";
		content: "\e013";
		top: 42%;
		left: 3px;
		margin-top: -5px;
		font-size: 11px;
		line-height: 1;
		width: 16px;
		height: 16px;
		color: #333;
	}

	.checkbox-custom label {
		cursor: pointer;
		line-height: 1.2;
		font-weight: normal;
		margin-bottom: 0;
		text-align: left;
	}

	.form-control,
	.form-control:focus,
	.has-error .form-control:focus,
	.has-success .form-control:focus,
	.has-warning .form-control:focus,
	.navbar-collapse,
	.navbar-form,
	.navbar-form-custom .form-control:focus,
	.navbar-form-custom .form-control:hover,
	.open .btn.dropdown-toggle,
	.panel,
	.popover,
	.progress,
	.progress-bar {
		box-shadow: none;
	}

	.form-control {
		border-radius: 1px !important;
		padding: 6px 12px !important;
		height: 34px !important;
	}

	.form-control:focus {
		border-color: #1ab394 !important;
	}

	.btn button {
		width: 100%;
	}

	.row {
		display: flex;
		margin-top: 10px;
	}

	.row input {
		padding: 6px 12px !important;
		height: 21px !important;
		width: 280px;
		border: solid 1px #ccc;
		border-radius: 5px;
	}

	.row .code {
		width: 120px;
		margin-right: 20px;
	}
</style>
